<!-- <!DOCTYPE html> -->
<html>
<head>
<meta charset="utf-8">
<link href="style.css" rel="stylesheet">
</head>
<body onload="opacity()">
<div id="appWrapper">
    <div id="container">
        <div class="border">
            <div class="close">&#10005;</div>
            <div class="minimize">&#150;</div>
            <div class="settings"><img src="settings.svg"></div>
            <div class="sync"><img src="sync.svg"></div>
        </div>
        <div id="actualWeather">
            <div id="city"><span></span></div>
            <div id="code"></div>
            <div class="details">
                <div class="left">
                    <span id="thermometer" style="font-family: 'ClimaconsRegular'; position: relative; top: -12px; right: -5px;"></span>
                    <span id="temperature"></span>
                </div>
                <div class="right">
                    <span id="windSpeed"></span> <span id="windUnit"></span><br>
                    <span id="humidity" title="Humidity">
                        <img id="humidityIcon" src="humidity.svg" width="15" height="15" style="vertical-align: middle;  filter: none; box-shadow: none;" title="Humidity">
                    </span>
                </div>
            </div>
            <div class="additional-info hidden">
                <div class="info-left" id="feelsLike">Feels Like: --°</div>
                <div class="info-right" id="rainPercentage" title="Rain Probability">
                    <span style="font-family: 'ClimaconsRegular';">{</span> --%
                </div>
            </div>
            <div class="week">
                <div id="0">
                    <span class="day"></span>
                    <span class="codeweek"><span class="code"></span></span>
                    <span class="temp"></span>
                </div>
                <div id="1">
                    <span class="day"></span>
                    <span class="codeweek"><span class="code"></span></span>
                    <span class="temp"></span>
                </div>
                <div id="2">
                    <span class="day"></span>
                    <span class="codeweek"><span class="code"></span></span>
                    <span class="temp"></span>
                </div>
                <div id="3">
                    <span class="day"></span>
                    <span class="codeweek"><span class="code"></span></span>
                    <span class="temp"></span>
                </div>
                <!-- <div id="4">
                    <span class="day"></span>
                    <span class="code2"><span class="code"></span></span>
                    <span class="temp"></span>
                </div> -->
            </div>
        </div>
    </div>
    <div id="locationModal">
        <div class="credits">
            <img src="back.svg">
            <h1 style="text-align: center"><a href="https://archisman-panigrahi.github.io/typhoon">Typhoon</a> 1.2</h1>
            <br>
            <p>Typhoon is a stylish weather application for GNU/Linux. It is and always will be free.<br> 
            <a href="https://github.com/apandada1/typhoon/">Source code</a> is released under <a href="http://www.gnu.org/licenses/gpl.html">GPL-3</a>.</p>
            <li>Based on <a href="https://github.com/consindo/stormcloud/tree/e7ef8e131466d477075e92337e502c3cac004ee2">Stormcloud 1.1</a> by <a href="https://github.com/consindo">Jono Cooper</a>.</li>
            <li>Currently developed and maintained by <a href="https://github.com/archisman-panigrahi">Archisman Panigrahi</a> and ChatGPT :)</li>
            <li>Icons (<a href="https://web.archive.org/web/20160531215708/http://adamwhitcroft.com/climacons/">Climacons</a>) by <a href="https://adamwhitcroft.com/">Adam Whitcroft</a>.</li>
            <li>Powered by <a href="https://open-meteo.com/">Open Meteo</a>, <a href="https://www.openstreetmap.org/">OpenStreetMap</a> and <a href="https://ipapi.co/">ipapi</a>.</li>
            <h3>Contributors:</h3>
            <li><a href="https://github.com/zlatanvasovic">Zlatan Vasović</a></li>
            <li><a href="https://github.com/soumyaDghosh">Soumyadeep Ghosh</a></li>
            <!-- <li>Esteban <a href="https://sites.google.com/site/typhoonweatherapp/help-and-how-to-1/howtomaketyphoonavailableineveryworkspace">(Found the way to make the app visible in every workspace)</a></li> -->
            <br>
            <p style="text-align: center">To those whose warmth brings sunshine and calm to every storm and whose light brightens the sky 💖</p><br><br>
        </div>
        <div class="input">
        <input type="text" placeholder="Location"><span class="loader"></span><br>
        e.g. Boston, Kolkata, Paris<br>
        <!-- <div id="apiKeyContainer">
            <br>
            <input type="text" id="apiKeyInput" placeholder="Enter API Key"><br>
            <button class="btn" id="saveApiKeyButton">Save API Key</button>
            <p>Get your free API key <a href="https://home.openweathermap.org/api_keys">HERE</a></p>
        </div> -->
        <a id="guessLocationBtn" class="btn">Guess Location</a>&nbsp;&nbsp;<a class="btn" href="https://github.com/archisman-panigrahi/typhoon">Support</a>
        </div>
        <div class="full">
            <div class="toggleswitch measurement">
                <span data-type="c">R</span><span data-type="f">T</span><span data-type="k">K</span>
            </div>
            <div class="toggleswitch speed">
                <span data-type="mph">mph</span><span data-type="kph">km/h</span><span data-type="ms">m/s</span>
            </div>
            <div class="color">
                <span data-color="gradient" title="Temperature based background color"></span>
                <span data-color="chameleonic">
                    <img src="chameleon-svgrepo-com.svg" alt="Chameleon Icon" style="width: 90%; height: 90%; display: block; margin: 0 auto;" title="Wallpaper based Chameleonic background">
                </span>
                <input type="color" id="customColorPicker" title="Pick a custom color" />
                <span data-color="575591"></span>
                <span data-color="FF0097"></span>
                <span data-color="00ABA9"></span>
                <span data-color="8CBF26"></span>
                <span data-color="A05000"></span>
                <span data-color="333333"></span>
                <span data-color="F09609"></span>
                <span data-color="1BA1E2"></span>
                <span data-color="FF8E83"></span>
                <span data-color="339933"></span>
            </div>
            <br>
            <div class="launcher">
                <input type="checkbox" id="launcherswitch"><label for="launcherswitch">Show Launcher Count</label>
            </div>
                <br>
                Opacity <br><br>
                <input id="slider" type="range" min ="0.1" max="1.0" step ="0.05" onchange="updateTitle(this.value);"/>
            
        <br><br>&nbsp;&nbsp;&nbsp;<a class="btn" tag="credits">CREDITS</a>&nbsp;&nbsp;<a class="btn" href="https://archisman-panigrahi.github.io/typhoon">HOMEPAGE</a>&nbsp;&nbsp;<a class="btn" id="resetButton">RESET</a>
        <br><br><br><br>
        </div>
    </div>
<div id="errorMessage">
    Could not connect to internet.<br>
    Check your internet connection.<br>
    <button class="btn">TRY AGAIN</button>
</div>
</div>
<script src="jquery-3.7.1.min.js"></script>
<script src="script.js"></script>
</body>
</html>
